<form class="form-horizontal" role="form" id="form" enctype="multipart/form-data">
    <div class="row">
        <div class="col-md-12">
            <h3 class="header smaller lighter blue">
                贷款信息
            </h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="product">贷款产品</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="product"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="childProduct">子产品</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="childProduct"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="termNo">申请贷款期数</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="termNo"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="purpose">贷款用途</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="purpose"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="account"> 申请贷款金额（元）</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="account"></label>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h3 class="header smaller lighter blue">
                申请人基本信息
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right">姓名</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="name"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right">身份证号</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="idNo"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right">手机号码</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="mobileNo"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right">放款银行卡</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="bankCardNo"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right">银行名称</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="bankCardName"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="marry">婚姻状况</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="marry"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right">所在城市</label>
                <div class="col-md-7">
                    <label class="control-label text-left" id="province"></label>&nbsp;
                    <label class="control-label text-left" id="city"></label>&nbsp;
                    <label class="control-label text-left" id="region"></label>
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="houseType">住宅性质</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="houseType"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="companyType"> 单位性质 </label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="companyType"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="workType">职业类型</label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="workType"></label>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <h3 class="header smaller lighter blue">
                联系人信息
            </h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="friendName1"> 姓名 </label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="friendName1"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="friendMobileNo1"> 手机号码 </label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="friendMobileNo1"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="friendShip1"> 与申请人关系 </label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="friendShip1"></label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-1 control-label no-padding-right" for="friendName2"> 姓名 </label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="friendName2"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="friendMobileNo2"> 手机号码 </label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="friendMobileNo2"></label>
                </div>
                <label class="col-md-1 control-label no-padding-right" for="friendShip2"> 与申请人关系 </label>
                <div class="col-md-3">
                    <label class="control-label text-left" id="friendShip2"></label>
                </div>
            </div>
        </div>
    </div>

    <div class="row showItem">
        <div class="col-md-12">
            <h3 class="header smaller lighter blue">
                资料清单
            </h3>
        </div>
    </div>

    <div class="row showItem">
        <div class="col-xs-12">
            <table id="fileTable" class="table table-striped table-bordered table-hover" width="100%">
                <thead>
                <tr>
                    <th class="center">资料名称</th>
                    <th class="center">资料类型</th>
                    <th class="center">上传人</th>
                    <th class="center">上传时间</th>
                    <th class="center">查看</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div><!-- /.span -->
    </div>

    <div class="row showItem">
        <div class="col-md-12">
            <h3 class="header smaller lighter blue">
                还款计划
            </h3>
        </div>
    </div>

    <div class="row showItem">
        <div class="col-xs-12">
            <table id="repaymentScheduleTable" class="table table-striped table-bordered table-hover" width="100%">
                <thead>
                <tr>
                    <th class="center">计划还款日</th>
                    <th class="center">期初余额（元）</th>
                    <th class="center">期末余额（元）</th>
                    <th class="center">当期应还（元）</th>
                    <th class="center">应还本金（元）</th>
                    <th class="center">应还利息（元）</th>
                    <th class="center">状态</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div><!-- /.span -->
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="clearfix form-actions">
                <div class="col-md-offset-5 col-md-9">
                    <input type="button" value="返回" style="width: 80px"  class="btn btn-primary" onclick="back()">
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="orderId" value="<%=orderId%>">
</form>

<script src="/js/jquery.validate.min.js"></script>
<script src="/js/messages_zh.js"></script>
<script src="/js/common/form.js"></script>
<script src="/js/common/region.js"></script>
<script src="/js/common/dict.js"></script>
<script src="/js/common/product.js"></script>
<script>
    var fileTable;
    var repaymentScheduleTable;
    $(document).ready(function() {
        $('#form').validate();
        $('#file').ace_file_input({
            no_file:'请选择文件',
            btn_choose:'选择',
            btn_change:'重新选择',
            droppable:false,
            onchange:null,
            thumbnail:false //| true | large
            //whitelist:'gif|png|jpg|jpeg'
            //blacklist:'exe|php'
            //onchange:''
            //
        });


        $.get('/biz/order/form_data?orderId=<%=orderId%>', function(data){


            // $('#product').html(getDictDescByCode(data.dict, 'PRODECT', data.order.product));
            // $('#childProduct').html(data.order.childProduct);
            $('#account').html(data.order.account);
            $('#termNo').html(getDictDescByCode(data.dict, 'TERM_NO', data.order.termNo));
            $('#purpose').html(getDictDescByCode(data.dict, 'LOAN_PURPOSE', data.order.purpose));

            $('#marry').html(getDictDescByCode(data.dict, 'MARITAL_STATUS', data.order.product));
            $('#companyType').html(getDictDescByCode(data.dict, 'COMPANY_TYPE', data.order.product));
            $('#houseType').html(getDictDescByCode(data.dict, 'HOUSE_TYPE', data.order.product));
            $('#workType').html(getDictDescByCode(data.dict, 'WORK_TYPE', data.order.product));
            $('#friendShip1').html(getDictDescByCode(data.dict, 'CONTACT_RELATIONSHIP', data.order.product));
            $('#friendShip2').html(getDictDescByCode(data.dict, 'CONTACT_RELATIONSHIP', data.order.product));

            $('#name').html(data.order.name);
            $('#idNo').html(data.order.idNo);
            $('#mobileNo').html(data.order.mobileNo);
            $('#friendName1').html(data.order.friendName1);
            $('#friendMobileNo1').html(data.order.friendMobileNo1);
            $('#friendName2').html(data.order.friendName2);
            $('#friendMobileNo2').html(data.order.friendMobileNo2);
            $('#bankCardNo').html(data.order.bankCardNo);
            $('#bankCardName').html(data.order.bankCardName);

            var products = data.products;
            $('#product').html(getProductNameByCode(products, data.order.product));
            $('#childProduct').html(getProductNameByCode(products, data.order.childProduct));
            var region = data.region;
            $('#province').html(getProvinceById(region,data.order.province));
            $('#city').html(getCityById(region,data.order.city));
            $('#region').html(getAreaById(region,data.order.region));
        });

        fileTable = $('#fileTable').DataTable({
            "processing": true,
            "lengthChange": false,
            "filter": false,
            //开启服务器模式
            //serverSide: true,
            //数据来源（包括处理分页，排序，过滤） ，即url，action，接口，等等
            ajax: '/common/file/order_file_list?orderId=<%=orderId%>',
            columns: [
                { data: 'fileName', className: 'center' },
                { data: 'fileType', className: 'center' },
                { data: 'uploadName', className: 'center' },
                { data: 'createTime', className: 'center' },
                { data: 'fileUrl', className: 'center' }
            ],
            columnDefs: [{
                "render": function ( data, type, row, meta ) {
                    return '<input type="button" value="查看" style="width: 80px" class="btn btn-minier btn-primary" onclick="showFile(\'' + data + '\')">';
                },
                "targets": 4
            }],
            "initComplete": function(settings, json) {
                // showListData(data);
            }
        });

        repaymentScheduleTable = $('#repaymentScheduleTable').DataTable({
            "processing": true,
            "lengthChange": false,
            "filter": false,
            //开启服务器模式
            //serverSide: true,
            //数据来源（包括处理分页，排序，过滤） ，即url，action，接口，等等
            ajax: '/biz/order/repayment_schedule_list_data?orderId=<%=orderId%>',
            columns: [
                { data: 'dueDate', className: 'center' },
                { data: 'beginCount', className: 'center' },
                { data: 'endCount', className: 'center' },
                { data: 'repaymentAmount', className: 'center' },
                { data: 'principalAmount', className: 'center' },
                { data: 'interestAmount', className: 'center' },
                { data: 'status', className: 'center' }
            ]
        });
    });

    function showFile(fileUrl){
        $.get('/common/file/file_download?fileUrl=' + fileUrl, function(data,status){
            window.open(data);
        });
    }

    function doSubmit(){
        $.ajax({
            url: "/biz/order/form_save",
            type: "POST",
            data: $("#form").serialize(),
            success:function(data){
                if(data.code=='0'){
                    alert("提交成功");
                    $(location).attr('href', '/biz/order/list?menuId=<%=menuId%>');
                }else {
                    $('#submit').attr("disabled",false);
                    alert(data.message);
                }
            }
        });
    }

    function back(){
        $(location).attr('href', '/biz/order/list?menuId=<%=menuId%>');
    }
</script>